<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" :title="title" width="850px" destroyOnClose>
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <a-button preIcon="ant-design:plus-outlined" type="primary" style="margin-right: 5px" @click="handleOpenAddTemplateDrawer">
          新增模板
        </a-button>
      </template>
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
      <template #status="{ record }">
        <Switch  
          v-model:checked="record.status" checked-children="启用" size="default"
          un-checked-children="禁用" @change="(checked) => handleChangeStatus(checked, record)"/>
      </template>
    </BasicTable>
    <TemplateConfigDrawer @register="registerTemplateConfigDrawer" @success="reload"/>
    <TemplateDrawer @register="registerTemplateDrawer" @success="reload" showFooter/>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import {computed, ref, unref} from 'vue';
import {Switch} from 'ant-design-vue';
import {BasicDrawer, useDrawer, useDrawerInner} from '/@/components/Drawer';
import TemplateDrawer from './TemplateDrawer.vue';
import {BasicTable, TableAction} from '/@/components/Table';
import TemplateConfigDrawer from './TemplateConfigDrawer.vue';
import {taskTemplateColumns} from '../template.data';
import {useMessage} from '/@/hooks/web/useMessage';
import {useListPage} from '/@/hooks/system/useListPage'
import {deleteTemplate, pageTemplate, updateTemplateStatus} from '../template.api';

const { createMessage } = useMessage();
// 声明Emits
const emit = defineEmits(['success', 'register']);

const taskId = ref<string>('-1')
const isUpdate = ref(true);
const [registerTemplateConfigDrawer, { openDrawer: openTemplateConfigDrawer }] = useDrawer()
const [registerTemplateDrawer, { openDrawer: openTemplateDrawer }] = useDrawer()

const { prefixCls, tableContext } = useListPage({
  designScope: 'msg-push-template',
  tableProps: {
    title: '消息模板列表',
    api: pageTemplate,
    beforeFetch: (params) => {
      params.taskId = taskId.value
    },
    immediate: false,
    bordered: false,
    useSearchForm: false,
    showTableSetting: false,
    columns: taskTemplateColumns
  }
})

const [registerTable, { reload } ] = tableContext;


//表单赋值
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  setDrawerProps({ confirmLoading: false });
  taskId.value = data.record.id
  reload()
});

//设置标题
const title = computed(() => (!unref(isUpdate) ? '任务模板' : '任务模板'));


/**
 * 操作列定义
 * @param record
 */
 function getTableAction(record) {
  return [
    {
      label: '删除',
      popConfirm: {
        title: `是否确认删除`,
        confirm: handleDelete.bind(null, record),
      },
    },
    {
      label: '配置',
      onClick: handleOpenTemplateConfig.bind(null, record),
    },
    {
      label: '编辑',
      onClick: handleOpenEditTemplate.bind(null, record),
    },
  ]
}
/**
 * 删除事件
 */
 async function handleDelete(record) {
  await deleteTemplate({ id: record.id }, reload);
}

/**
 * 打开模板配置
 */
function handleOpenTemplateConfig(record) {
  openTemplateConfigDrawer(true, { record,  });
}

async function handleChangeStatus(checked, record) {
  console.log(checked, record);
  await updateTemplateStatus({status: checked, id: record.id})
}

function handleOpenAddTemplateDrawer() {
  openTemplateDrawer(true, {
    taskId: taskId.value,
    isShowSelectTask: false,
    isUpdate: false,
  });
}

function handleOpenEditTemplate(record) {
  openTemplateDrawer(true, {
    record,
    isUpdate: true,
  });
}
</script>

<style lang="less"> 

.select-channel {
  color: #40a9ff;
  margin-left: 1px;
  cursor: pointer;
  font-size: 14px;
}
</style>
